#index .section2 {
    height: 100vh !important;
    width: 100%;
    position: relative;
}

#index .section2 .barsList {
    height: 100%;
    width: 100%;
    position: absolute;
}

#index .section2 .bar {
    float: left;
    height: 100%;
    width: 4.76%;
    overflow: hidden;
    position: relative;
}


#index .section2 .bar1 {
    height: 100%;
    width: 4.8%;
}

/*-------- 第一条 --------*/
#index .section2 .bar1 .b1 {
    width: 100%;
    height: 60%;
    background-image: url("../Images/index2/c1.png");

}

#index .section2 .bar1 .b22 {
    width: 100%;
    height: 40%;
    background-image: url("../Images/index2/c22.png");

}

/*-------- 第二条 --------*/
#index .section2 .bar2 .b2 {
    width: 100%;
    height: 80%;
    background-image: url("../Images/index2/c2.png");
}



#index .section2 .bar2 .b23 {
    width: 100%;
    height: 20%;
    background-image: url("../Images/index2/c23.png");

}

/*-------- 第三条 --------*/
#index .section2 .bar3 .b3 {
    width: 100%;
    height: 28%;
    background-image: url("../Images/index2/c3.png");
}


#index .section2 .bar3 .b24 {
    width: 100%;
    height: 72%;
    background-image: url("../Images/index2/c24.png");

}

/*-------- 第四条 --------*/
#index .section2 .bar4 .b4 {
    width: 100%;
    height: 88%;
    background-image: url("../Images/index2/c4.png");
}


#index .section2 .bar4 .b25 {
    width: 100%;
    height: 12%;
    background-image: url("../Images/index2/c25.png");

}

/*-------- 第五条 --------*/
#index .section2 .bar5 .b5 {
    width: 100%;
    height: 22%;
    background-image: url("../Images/index2/c5.png");
}


#index .section2 .bar5 .b26 {
    width: 100%;
    height: 78%;
    background-image: url("../Images/index2/c26.png");

}

/*-------- 第六条 --------*/
#index .section2 .bar6 .b6 {
    width: 100%;
    height: 78%;
    background-image: url("../Images/index2/c6.png");
}


#index .section2 .bar6 .b27 {
    width: 100%;
    height: 22%;
    background-image: url("../Images/index2/c27.png");

}

/*-------- 第七条 --------*/
#index .section2 .bar7 .b7 {
    width: 100%;
    height: 78%;
    background-image: url("../Images/index2/c7.png");
}


#index .section2 .bar7 .b28 {
    width: 100%;
    height: 22%;
    background-image: url("../Images/index2/c28.png");

}

/*-------- 第八条 --------*/
#index .section2 .bar8 .b8 {
    width: 100%;
    height: 73%;
    background-image: url("../Images/index2/c8.png");
}


#index .section2 .bar8 .b29 {
    width: 100%;
    height: 27%;
    background-image: url("../Images/index2/c29.png");

}

/*-------- 第九条 --------*/
#index .section2 .bar9 .b9 {
    width: 100%;
    height: 54%;
    background-image: url("../Images/index2/c9.png");
}


#index .section2 .bar9 .b30 {
    width: 100%;
    height: 46%;
    background-image: url("../Images/index2/c30.png");

}

/*-------- 第十条 --------*/
#index .section2 .bar10 .b10 {
    width: 100%;
    height: 54%;
    background-image: url("../Images/index2/c10.png");
}


#index .section2 .bar10 .b31 {
    width: 100%;
    height: 46%;
    background-image: url("../Images/index2/c31.png");

}

/*-------- 第十一条 --------*/
#index .section2 .bar11 .b11 {
    width: 100%;
    height: 80%;
    background-image: url("../Images/index2/c11.png");
}


#index .section2 .bar11 .b32 {
    width: 100%;
    height: 20%;
    background-image: url("../Images/index2/c32.png");

}

/*-------- 第十二条 --------*/
#index .section2 .bar12 .b12 {
    width: 100%;
    height: 88%;
    background-image: url("../Images/index2/c12.png");
}


#index .section2 .bar12 .b33 {
    width: 100%;
    height: 12%;
    background-image: url("../Images/index2/c33.png");

}

/*-------- 第十三条 --------*/
#index .section2 .bar13 .b13 {
    width: 100%;
    height: 80%;
    background-image: url("../Images/index2/c13.png");
}


#index .section2 .bar13 .b34 {
    width: 100%;
    height: 20%;
    background-image: url("../Images/index2/c34.png");

}

/*-------- 第十四条 --------*/
#index .section2 .bar14 .b14 {
    width: 100%;
    height: 22%;
    background-image: url("../Images/index2/c14.png");
}


#index .section2 .bar14 .b35 {
    width: 100%;
    height: 78%;
    background-image: url("../Images/index2/c35.png");

}

/*-------- 第十五条 --------*/
#index .section2 .bar15 .b15 {
    width: 100%;
    height: 62.5%;
    background-image: url("../Images/index2/c15.png");
}


#index .section2 .bar15 .b36 {
    width: 100%;
    height: 37.5%;
    background-image: url("../Images/index2/c36.png");

}

/*-------- 第十六条 --------*/
#index .section2 .bar16 .b16 {
    width: 100%;
    height: 80%;
    background-image: url("../Images/index2/c16.png");
}


#index .section2 .bar16 .b37 {
    width: 100%;
    height: 20%;
    background-image: url("../Images/index2/c37.png");

}

/*-------- 第十七条 --------*/
#index .section2 .bar17 .b17 {
    width: 100%;
    height: 80%;
    background-image: url("../Images/index2/c17.png");
}


#index .section2 .bar17 .b38 {
    width: 100%;
    height: 20%;
    background-image: url("../Images/index2/c38.png");

}

/*-------- 第十八条 --------*/
#index .section2 .bar18 .b18 {
    width: 100%;
    height: 30%;
    background-image: url("../Images/index2/c18.png");
}


#index .section2 .bar18 .b39 {
    width: 100%;
    height: 70%;
    background-image: url("../Images/index2/c39.png");

}

/*-------- 第十九条 --------*/
#index .section2 .bar19 .b19 {
    width: 100%;
    height: 16%;
    background-image: url("../Images/index2/c19.png");
}


#index .section2 .bar19 .b40 {
    width: 100%;
    height: 84%;
    background-image: url("../Images/index2/c40.png");

}

/*-------- 第二十条 --------*/
#index .section2 .bar20 .b20 {
    width: 100%;
    height: 80%;
    background-image: url("../Images/index2/c20.png");
}


#index .section2 .bar20 .b41 {
    width: 100%;
    height: 20%;
    background-image: url("../Images/index2/c41.png");

}

/*-------- 第二十一条 --------*/
#index .section2 .bar21 .b21 {
    width: 100%;
    height: 57%;
    background-image: url("../Images/index2/c21.png");
}


#index .section2 .bar21 .b42 {
    width: 100%;
    height: 43%;
    background-image: url("../Images/index2/c42.png");

}


/* ------------ 标题-----------*/

#index .section2 .titleBar {
    display: inline-block;
    position: absolute;
    width: 4.8%;
    left: 5.8%;
    top: 0;
    bottom: 0;

}

#index .section2 .titleBar .titleContent {
    position: relative;
    display: inline-block;
    padding-top: 45px;
    padding-bottom: 45px;
    font-size: 2.2857rem;
    vertical-align: middle;
}


#index .section2 .titleBar .title {
    left: 5.8%;
    font-size: 2.2857rem;
    color: #FFFFFF;
    writing-mode: vertical-rl;
}


#index .section2 .title::before,
#index .section2 .title::after {
    position: relative;
    display: inline-block;
    content: " ";
    width: 2.4285rem;
    height: 1.7143rem;
    background-image: url("../Images/index2/png3.png");

}

#index .section2 .title::before {
    top: -20px;
}

#index .section2 .title::after {
    background-position: 34px 24px;
    top: 20px;
}

.titleBar::after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    font-size: 0;
}

#index .section .contents {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
}

#index .section .contents .content {
    width: 9.52%;
    background: center no-repeat;
    background-size: contain;

    text-align: center;
    box-shadow: 0px 0px 38px 0px rgb(4, 1, 1, .4);
    position: absolute;

    display: none;
    /* opacity: 1; */
}

#index .section .contents .content:before {
    content: '';
    display: block;
    padding-bottom: 173.92%;

}

#index .section .contents .content1 {

    background-image: url("../Images/index2/b1.png");
    top: 0;
    margin-top: -110px;
    left: 14.32%;
    /* animation: fadeIn;
    animation-duration:5s; */
}

#index .section .contents .content2 {

    background-image: url("../Images/index2/b2.png");
    margin-top: -35px;
    top: 0;
    left: 23.84%;
}

#index .section .contents .content3 {

    background-image: url("../Images/index2/b3.png");
    margin-bottom: 35px;
    bottom: 0;
    left: 28.6%;
}

#index .section .contents .content4 {
    bottom: 0;
    background-image: url("../Images/index2/b4.png");
    margin-bottom: -45px;
    left: 38.12%;
}

#index .section .contents .content5 {
    background-image: url("../Images/index2/b5.png");
    margin-top: 45px;
    top: 0;
    left: 38.12%;
}

#index .section .contents .content6 {
    bottom: 0;
    background-image: url("../Images/index2/b6.png");
    margin-bottom: -112px;
    left: 47.64%;
}

#index .section .contents .content7 {
    top: 0;
    background-image: url("../Images/index2/b7.png");
    margin-top: -110px;
    left: 57.16%;
}

#index .section .contents .content8 {
    bottom: 0;
    background-image: url("../Images/index2/b8.png");
    margin-bottom: 8px;
    left: 71.44%;
}

#index .section .contents .content9 {
    top: 0;
    background-image: url("../Images/index2/b9.png");
    margin-top: 42px;
    left: 76.2%;
}

#index .section .contents .content10 {
    top: 0;
    background-image: url("../Images/index2/b10.png");
    margin-top: -110px;
    left: 85.72%;
}

@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(100px)
    }




    100% {
        opacity: 1;
        transform: translateY(0)
    }
}


@keyframes fadeDown {
    0% {
        opacity: 0;
        transform: translateY(-100px)
    }


    100% {
        opacity: 1;
        transform: translateY(0)
    }
}